<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test18</title>
		<style>
			body
			{
				background-color: black;
			}
			#pic
			{
				position: absolute;
				top: 300px;
				width: 1600px;
				height: 200px;
				background-color: wheat;
			}
			.pd
			{
				margin-top: 10px;
				float: left;
			}
			.pd:hover>.name
			{
				color: orangered;
				font-size: 50px;
			}
			.jg
			{
				height: 200px;
				width: 200px;
				background-color: wheat;
				float: left;
			}
			.name
			{
				margin: auto;
				text-align: center;
				font-size: 30px;
				font-weight: 800;
				color: darkred;
				transition: 1s;
			}
			#cont
			{
				position: absolute;
				top: 200px;
				width: 1600px;
			}
			.context
			{
				position: relative;
				margin: 10px;
				font-size: 20px;
				color: aqua;
				border: solid 3px aqua;
				padding: 8px;
				border-radius: 20px;
				float: left;
				transition: 1s;
			}
			.context::first-line
			{
				font-size: 30px;
				text-shadow: 0px 0px 5px aqua;
				transition: 1s;
			}
			.plant
			{
				
				margin-top: 10px;
				color: green;
				border: solid 3px green;
				padding: 8px;
				border-radius: 20px;
				transition: 1s;
			}
			.plant::first-line
			{
				font-size: 30px;
				text-shadow: 0px 0px 5px green;
				transition: 1s;
			}
			.animal
			{
				margin-top: 10px;
				color: coral;
				border: solid 3px coral;
				padding: 8px;
				border-radius: 20px;
				transition: 1s;
			}
			.animal::first-line
			{
				font-size: 30px;
				text-shadow: 0px 0px 5px coral;
				transition: 1s;
			}
			#ct0
			{
				width: 225px;
			}
			#ct1
			{
				width: 280px;
			}
			#ct2
			{
				width: 250px;
			}
			#ct3
			{
				width: 300px;
			}
			#ct4
			{
				width: 300px;
			}
			#p0:hover~div #ct0
			{
				display: block;
				width: auto;
				font-size: 50px;
				font-weight: 800;
				letter-spacing: 10px;
			}
			#p0:hover~div #ct0::first-line
			{
				font-size: 60px;
			}
			#p0:hover~div .context
			{
				display: none;
			}
			#p0:hover~#clbg1
			{
				top: -270px;
				height: 240px;
			}

			#p1:hover~div #ct1
			{
				display: block;
				width: auto;
				font-size: 50px;
				font-weight: 800;
				letter-spacing: 10px;
			}
			#p1:hover~div #ct1::first-line
			{
				font-size: 60px;
			}
			#p1:hover~div #ct1 .plant::first-line
			{
				font-size: 60px;
			}
			#p1:hover~div #ct1 .animal::first-line
			{
				font-size: 60px;
			}
			#p1:hover~div .context
			{
				display: none;
			}
			#p1:hover~#clbg2
			{
				top: -270px;
				height: 240px;
			}

			#p2:hover~div #ct2
			{
				display: block;
				width: auto;
				font-size: 50px;
				font-weight: 800;
				letter-spacing: 10px;
			}
			#p2:hover~div #ct2::first-line
			{
				font-size: 60px;
			}
			#p2:hover~div .context
			{
				display: none;
			}
			#p2:hover~#clbg3
			{
				top: -270px;
				height: 240px;
			}

			#p3:hover~div #ct3
			{
				display: block;
				width: auto;
				font-size: 50px;
				font-weight: 800;
				letter-spacing: 10px;
			}
			#p3:hover~div #ct3::first-line
			{
				font-size: 60px;
			}
			#p3:hover~div .context
			{
				display: none;
			}
			#p3:hover~#clbg4
			{
				top: -270px;
				height: 240px;
			}

			#p4:hover~div #ct4
			{
				display: block;
				width: auto;
				font-size: 50px;
				font-weight: 800;
				letter-spacing: 10px;
			}
			#p4:hover~div #ct4::first-line
			{
				font-size: 60px;
			}
			#p4:hover~div #ct4 .plant::first-line
			{
				font-size: 60px;
			}
			#p4:hover~div #ct4 .animal::first-line
			{
				font-size: 60px;
			}
			#p4:hover~div .context
			{
				display: none;
			}
			#p4:hover~#clbg5
			{
				top: -270px;
				height: 240px;
			}

			.clbg
			{
				position: absolute;
				z-index: -1;
				top: -30px;
				height: 0px;
				background-color: rgba(189, 183, 107, 0.3);
				transition: 2s;
			}
			#clbg1
			{
				left: 200px;
				width: 600px;
			}
			#clbg2
			{
				left: 800px;
				width: 200px;
			}
			#clbg3
			{
				left: 1000px;
				width: 200px;
			}
			#clbg4
			{
				left: 1200px;
				width: 200px;
			}
			#clbg5
			{
				left: 1400px;
				width: 170px;
			}
			.chartt
			{
				position: absolute;
				left: 20px;
				font-size: 30px;
			}
			.ctts
			{
				position: absolute;
				display: none;
				left: 0px;
			}
			.cbl
			{
				position: absolute;
				left: 4px;
				height: 40px;
				width: 10px;
				background-color: transparent;
				transition: 1s;
			}
			#ctt1
			{
				color: aqua;
				top: -250px;
			}
			#cbl1
			{
				top: -250px;
			}
			#ctt1:hover~svg #l2
			{
				stroke-dasharray: 1600;
				stroke-dashoffset: 1600;
			}
			#ctt1:hover~svg #l3
			{
				stroke-dasharray: 1600;
				stroke-dashoffset: 1600;
			}
			#ctt1:hover~svg .gh
			{
				stroke-opacity: 0.8;
			}
			#ctt1s
			{
				top: -235px;
			}
			#ctt1s:checked+#cbl1
			{
				background-color: crimson;
			}
			#ctt1s:checked~svg #l2
			{
				stroke-dasharray: 1600;
				stroke-dashoffset: 1600;
			}
			#ctt1s:checked~svg #l3
			{
				stroke-dasharray: 1600;
				stroke-dashoffset: 1600;
			}
			#ctt1s:checked~svg .gh
			{
				stroke-opacity: 0.8;
			}
			#ctt2
			{
				color: chartreuse;
				top: -200px;
			}
			#ctt2s:checked+#cbl2
			{
				background-color: crimson;
			}
			#cbl2
			{
				top: -200px;
			}
			#ctt2:hover~svg #l1
			{
				stroke-dasharray: 1600;
				stroke-dashoffset: 1600;
			}
			#ctt2:hover~svg #l3
			{
				stroke-dasharray: 1600;
				stroke-dashoffset: 1600;
			}
			#ctt2:hover~svg .gh
			{
				stroke-opacity: 0.8;
			}
			#ctt2s:checked~svg #l1
			{
				stroke-dasharray: 1600;
				stroke-dashoffset: 1600;
			}
			#ctt2s:checked~svg #l3
			{
				stroke-dasharray: 1600;
				stroke-dashoffset: 1600;
			}
			#ctt2s:checked~svg .gh
			{
				stroke-opacity: 0.8;
			}
			#ctt2s
			{
				top: -185px;
			}
			#ctt3
			{
				color: coral;
				top: -150px;
			}
			#ctt3s:checked+#cbl3
			{
				background-color: crimson;
			}
			#cbl3
			{
				top: -150px;
			}
			#ctt3:hover~svg #l1
			{
				stroke-dasharray: 1600;
				stroke-dashoffset: 1600;
			}
			#ctt3:hover~svg #l2
			{
				stroke-dasharray: 1600;
				stroke-dashoffset: 1600;
			}
			#ctt3:hover~svg .gh
			{
				stroke-opacity: 0.8;
			}
			#ctt3s
			{
				top: -135px;
			}
			#ctt3s:checked~svg #l1
			{
				stroke-dasharray: 1600;
				stroke-dashoffset: 1600;
			}
			#ctt3s:checked~svg #l2
			{
				stroke-dasharray: 1600;
				stroke-dashoffset: 1600;
			}
			#ctt3s:checked~svg .gh
			{
				stroke-opacity: 0.8;
			}
			.gh
			{
				stroke-dasharray: 30;
				stroke-opacity: 0.2;
				transition: 2s;
			}
			#l1
			{
				transition: 2s;
			}
			#l2
			{
				transition: 2s;
			}
			#l3
			{
				transition: 2s;
			}
			#lc
			{
				position: absolute;
				top: -300px;
				left: 0px;
				z-index: -1;
			}
		</style>
		<script>
			cp1=0;
			cp2=0;
			cp3=0;
			function cbf(num)
			{
				if(num==1)
				{
					if(cp1==0)
					{
						document.getElementById('ctt1s').checked=1;
						cp1=1;
						document.getElementById('ctt2s').checked=0;
						cp2=0;
						document.getElementById('ctt3s').checked=0;
						cp3=0;
					}
					else
					{
						document.getElementById('ctt1s').checked=0;
						cp1=0;
					}
				}
				else if(num==2)
				{
					if(cp2==0)
					{
						document.getElementById('ctt2s').checked=1;
						cp2=1;
						document.getElementById('ctt1s').checked=0;
						cp1=0;
						document.getElementById('ctt3s').checked=0;
						cp3=0;
					}
					else
					{
						document.getElementById('ctt2s').checked=0;
						cp2=0;
					}
				}
				else if(num==3)
				{
					if(cp3==0)
					{
						document.getElementById('ctt3s').checked=1;
						cp3=1;
						document.getElementById('ctt1s').checked=0;
						cp1=0;
						document.getElementById('ctt2s').checked=0;
						cp2=0;
					}
					else
					{
						document.getElementById('ctt3s').checked=0;
						cp3=0;
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="d1">
			<div id="pic">
				<div class="pd" id="p0" style="margin-left: 10px;"><img src="p0.png" width="123" height="122"><p class="name">间期</p></div>
				<div class="jg"></div>
				<div class="pd" id="p1"><img src="p1.png" width="125" height="121"><p class="name">前期</p></div>
				<div class="jg"></div>
				<div class="pd" id="p2"><img src="p2.png" width="120" height="118"><p class="name">中期</p></div>
				<div class="jg"></div>
				<div class="pd" id="p3"><img src="p3.png" width="178" height="115"><p class="name">后期</p></div>
				<div class="jg"></div>
				<div class="pd" id="p4"><img src="p4.png" width="183" height="103"><p class="name">末期</p></div>
				<div class="clbg" id="clbg1"></div>
				<div class="clbg" id="clbg2"></div>
				<div class="clbg" id="clbg3"></div>
				<div class="clbg" id="clbg4"></div>
				<div class="clbg" id="clbg5"></div>
				<div class="chartt" id="ctt1" onclick="cbf(1)">核DNA数</div><input type="checkbox" class="ctts" id="ctt1s"><div class="cbl" id="cbl1"></div>
				<div class="chartt" id="ctt2" onclick="cbf(2)">染色体数</div><input type="checkbox" class="ctts" id="ctt2s"><div class="cbl" id="cbl2"></div>
				<div class="chartt" id="ctt3" onclick="cbf(3)">染色单体数</div><input type="checkbox" class="ctts" id="ctt3s"><div class="cbl" id="cbl3"></div>
				<svg height='300' width='1600' id="lc">
					<g font-size='20' fill='red' stroke='none' text-anchor='middle'>
						<text x='185' y='80'>4n</text>
						<text x='185' y='200'>2n</text>
						<text id="tjq" x='500' y='295'>间期</text>
						<text id="tqq" x='900' y='295'>前期</text>
						<text id="tzq" x='1100' y='295'>中期</text>
						<text id="thq" x='1300' y='295'>后期</text>
						<text id="tmq" x='1500' y='295'>末期</text>
					</g>
					<path class="gh" id="gh1" d='M 200 80 L 1570 80' stroke='red' stroke-linecap='round' fill='none' stroke-width='5'></path>
					<path class="gh" id="gh2" d='M 200 200 L 1570 200' stroke='red' stroke-linecap='round' fill='none' stroke-width='5'></path>
					<path id="l1" d='M 200 195 L 300 195 L 700 75 L 1400 75 L 1400 195 L 1570 195' fill='none' stroke='aqua' stroke-linecap='round' stroke-width='5'></path>
					<path id="l2" d='M 200 200 L 1200 200 L 1200 85 L 1400 85 L 1400 200 L 1570 200' fill='none' stroke='chartreuse' stroke-linecap='round' stroke-width='5'></path>
					<path id="l3" d='M 200 265 L 300 265 L 700 80 L 1400 80 L 1400 270' fill='none' stroke='coral' stroke-linecap='round' stroke-width='5'></path>
					<path id="gw1" d='M 800 250 L 800 290' stroke='red' stroke-linecap='round' fill='none' stroke-width='5'></path>
					<path id="gw2" d='M 1000 250 L 1000 290' stroke='red' stroke-linecap='round' fill='none' stroke-width='5'></path>
					<path id="gw3" d='M 1200 250 L 1200 290' stroke='red' stroke-linecap='round' fill='none' stroke-width='5'></path>
					<path id="gw4" d='M 1400 250 L 1400 290' stroke='red' stroke-linecap='round' fill='none' stroke-width='5'></path>
					<path id="bg" d='M 200 30 L 200 270 L 1570 270' stroke='red' stroke-linecap='round' fill='none' stroke-width='5'></path>
				</svg>
				<div id="cont">
					<div class="context" id="ct0">
						间期<br>DNA和有关蛋白质复制
					</div>
					<div class="context" id="ct1">
						前期<br>核膜解体,核仁消失<br>染色质高度螺旋化成染色体
						<div class="plant">高等植物<br>两极产生纺锤丝形成纺锤体</div>
						<div class="animal">动物<br>中心粒发出星射线形成纺锤体</div>
					</div>
					<div class="context" id="ct2">
						中期<br>着丝点整齐排列在赤道板上
					</div>
					<div class="context" id="ct3">
						后期<br>着丝点断裂<br>姐妹染色单体分开<br>纺锤丝收缩<br>两组均等染色体向两级移动
					</div>
					<div class="context" id="ct4">
						末期<br>染色体重新变回染色质<br>纺锤体消失<br>核膜核仁重现
						<div class="plant">高等植物<br>细胞板形成新细胞壁</div>
						<div class="animal">动物<br>向内凹陷形成两个子细胞</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>